<template>
  <!-- 人员基本信息 -->
  <div style="padding: 20px">
    <el-form inline :model="form" ref="form" label-width="120px" size="mini">
      <el-form-item label="人员姓名" prop="psPersonName">
        <el-input
          placeholder="请输入人员姓名"
          v-model="form.psPersonName"
        ></el-input>
      </el-form-item>
      <el-form-item label="区队班组/部门" prop="psPersonDept">
        <el-input
          placeholder="请输入区队班组/部门"
          v-model="form.psPersonDept"
        ></el-input>
      </el-form-item>
      <el-form-item label="岗位" prop="psPersonPost">
        <el-input
          placeholder="请输入岗位"
          v-model="form.psPersonPost"
        ></el-input>
      </el-form-item>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="handleQuery"
        >搜索</el-button
      >
      <!-- <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      > -->
      <el-button size="mini" icon="el-icon-refresh" @click="resetQuery"
        >重置</el-button
      >
    </el-form>
    <el-table :header-cell-style="thaderBack" :data="tableData">
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="psPersonCard"
        label="人员卡代码"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="psPersonName" label="姓名" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="psPersonPost" label="岗位" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="psPersonDept"
        label="区队班组/部门"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- <el-table-column
        prop="psPersonPost"
        label="岗位"
        show-overflow-tooltip
      >
      </el-table-column> -->
      <el-table-column
        prop="broadcastStatus"
        label="头像上传状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.headImgPath ? "已上传" : "未上传" }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="130"
      >
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)"
            ><i class="el-icon-edit"></i>查看</el-button
          >
          <!-- <el-button type="text" size="mini" @click="handleDelete(scope.row)"
            ><i class="el-icon-delete"></i>删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="form.pageNum"
      :limit.sync="form.pageSize"
      @pagination="getList"
    />
    <el-dialog width="1000px" title="查看个人信息" :visible.sync="isShow">
      <div class="usermain">
        <div class="userheadimg">
          <userAvatar :user="user" />
        </div>
        <div class="userheadtext">
          <ul class="userlist">
            <li>
              <span>煤矿编码：</span><span>{{ userlist.csMineCode }}</span>
            </li>
            <li>
              <span>人员卡代码：</span><span>{{ userlist.psPersonCard }}</span>
            </li>
            <li>
              <span>姓名：</span><span>{{ userlist.psPersonName }}</span>
            </li>
            <li>
              <span>身份证号：</span><span>{{ userlist.psIdNumber }}</span>
            </li>
            <li>
              <span>岗位：</span><span>{{ userlist.psPersonPost }}</span>
            </li>
            <li>
              <span>工种或职务：</span><span>{{ userlist.psPersonDuty }}</span>
            </li>
            <li>
              <span>所在区队班组/部门：</span
              ><span>{{ userlist.psPersonDept }}</span>
            </li>
            <li>
              <span>主要工作地点：</span><span>{{ userlist.psWorkPlace }}</span>
            </li>
            <li>
              <span>性别：</span><span>{{ userlist.psPersonSex }}</span>
            </li>
            <li>
              <span>生日：</span><span>{{ userlist.psPersonBirthday }}</span>
            </li>
            <li>
              <span>血型：</span><span>{{ userlist.psPersonBlood }}</span>
            </li>
            <li>
              <span>学历：</span><span>{{ userlist.psPersonEdu }}</span>
            </li>
            <li>
              <span>婚姻状况：</span><span>{{ userlist.psPersonMarry }}</span>
            </li>
            <li>
              <span>紧急联系电话：</span
              ><span>{{ userlist.psPersonEmer }}</span>
            </li>
            <li>
              <span>家庭住址：</span><span>{{ userlist.psPersonAddr }}</span>
            </li>
            <li>
              <span>工种证件名称：</span
              ><span>{{ userlist.psPersonDutyname }}</span>
            </li>
            <li>
              <span>工种证件编码：</span
              ><span>{{ userlist.psPersonDutynum }}</span>
            </li>
            <li>
              <span>工种证件有效日期：</span
              ><span>{{ userlist.psPersonDutydate }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//import { communal } from '@/api/common.js'
import userAvatar from "./userAvatar";
import { listUser } from "@/api/mine/userinfo";
export default {
  //mixins: [communal],
  components: { userAvatar },
  data() {
    return {
      user: {},
      //url: '/staffPersonInfo/info/list',
      //addUrl: '/xbtBroadcast/add',
      //editUrl: '/xbtBroadcast/edit',
      form: {
        psPersonName: null,
        psPersonDept: null,
        psPersonDuty: null,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      userlist: {},
      total: 0,
      loading: false,
      isShow: false
    };
  },
  methods: {
    thaderBack() {
      return { background: "#F5F7FA", color: "#000" };
    },
    getList() {
      this.loading = true;
      listUser(this.form).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleUpdate(row) {
      this.user = row;
      this.$http.get("/staffPersonInfo/info/" + row.pkInfoPerson).then(res => {
        if (res.code === 200) {
          this.userlist = res.data;
          this.isShow = true;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.form.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("form");
      this.handleQuery();
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.usermain {
  width: 100%;
  display: flex;
  .userheadimg {
    width: 50%;
    text-align: center;
    padding-top: 50px;
    box-sizing: border-box;
  }
  .userheadtext {
    flex: 1;
    ul {
      border: 1px solid #ccc;
      li {
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        display: flex;
        span:nth-child(1) {
          width: 40%;
          border-right: 1px solid #ccc;
          text-align: right;
          font-weight: 600;
        }
        span:nth-child(2) {
          flex: 1;
          text-align: left;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>
